<template>
    <div class="right">
        <div class="flex-center time-select" @click="handleClick">
            <span class="datechose dateRange" id="datechose">{{startDate}} 至 {{endDate}}</span>
            <img slot="icon" src="/img/home/statistic/open.png" class="icon icon-down" id="sell" data-target="false">
            <input type="hidden" v-model="rangeDate" id="vue_rangeDate" name="vue_rangeDate">
        </div>
    </div>

</template>

<script type="text/ecmascript-6">
    import { pickerDateRange } from '../utils/dateRange';
    import '../../css/dateRange.css';

    export default {
        data() {
            return {
                rangeDate: '',
                month:'',
                week:''
            }
        },
        props: ['start','end'],
        computed:{
            startDate() {
                return this.format(this.start,'MM-dd');
            },
            endDate() {
                return this.format(this.end,'MM-dd');
            }
        },
        watch: {
            'rangeDate': function (newVal,oldVal) {
                this.dateChange(newVal);
            }
        },
        methods:{
            init(){
                new pickerDateRange('datechose',{
                    stopToday: false,
                    isTodayValid: true,
                    startDate: this.format(this.start,'yyyy-MM-dd'),
                    endDate: this.format(this.end,'yyyy-MM-dd'),
                    needCompare: false,
                    defaultText: '至',
                    autoSubmit: false,
                    inputTrigger: 'input_trigger1',
                    theme: 'ta',
                    monthRangeMax: 1,
                });
            },
            destory(){
                $('.ta_calendar').remove();
            },
            format(day,fmt){
                day = new Date(day);
                var o = {
                    "M+": day.getMonth() + 1, //月份
                    "d+": day.getDate(), //日
                    "h+": day.getHours(), //小时
                    "m+": day.getMinutes(), //分
                    "s+": day.getSeconds(), //秒
                    "q+": Math.floor((day.getMonth() + 3) / 3), //季度
                    "S": day.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (day.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            },
            handleClick(){
                this.init();
                $("html,body").addClass('noscroll');
                $(".ta_calendar").show();
            },
            dateChange(date){
                var range = date.split(",");
                if(range[1] < range[0]) range[1] = range[0];
                this.month = '';
                this.week = '';
                this.$emit('setRangeDate',range);
                this.destory();
            },
            thisWeek(){
                var end = new Date();
                var start = new Date(end.getFullYear(), end.getMonth(), end.getDate() - end.getDay()+1);
                this.month = '';
                this.week = 'active';
                this.$emit('setRangeDate',[this.format(start,'yyyy-MM-dd'),this.format(end,'yyyy-MM-dd')]);
                this.destory();
            },
            thisMonth(){
                var end = new Date();
                var start = new Date(end.getFullYear(), end.getMonth(), 1);
                this.month = 'active';
                this.week = '';

                this.$emit('setRangeDate',[this.format(start,'yyyy-MM-dd'),this.format(end,'yyyy-MM-dd')]);
                this.destory();
            }
        }
    }
</script>
